<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-4">
        <a v-bind:href="url" v-on:click="doSomething">{{urlName}}</a>
        <a :href="url" @click="doSomething">{{urlName}}</a>
        <form v-on:submit.prevent="onSubmit">
            <input v-model="url"/>
            <input type="submit"/>
        </form>
    </div>
    <script>
        var app4 = new Vue({
            el: '#app-4',
            data: {
                url: 'app1.html',
                urlName: 'app1'
            },
            methods: {
                doSomething: function () {
                    console.log('You trigger the doSomething by clicking the link ');
                },
                onSubmit: function () {
                    console.log('Form submited');
                }
            },
            watch: {
                url: function () {
                    this.urlName = this.url.split('.')[0]
                }
            }
        });
    </script>
</body>


</html>